<template>
  <div>
      <el-select 
	   style="width:650px;"
	   show-word-limit clearable
	    v-model="props.paramter"
        filterable
        remote
        reserve-keyword
        placeholder="请输入物料号"
        remote-show-suffix
        :remote-method="remoteMethod"
        :loading="loading"
		@change="selectChange"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
  </div>
</template>

<script lang="ts" setup>
    import { onMounted, ref } from 'vue';
    import _ from 'lodash';
import request from '/@/utils/request';
interface ListItem {
  id: number,
  key:string,
  label:string,
  value:any
}
var props = defineProps({
		paramter: {
		type: String,
		default: "",
	},
	info:{
		default:{}
		}
	});
const options = ref<ListItem[]>([])
const loading = ref(false)
let value=ref<any>()
//定义一个回调方法
const emit = defineEmits(["callBack"]);

onMounted(async() => {
	if(props.paramter!=null&&props.paramter!="")
		await remoteMethod(props.paramter)
})
const remoteMethod =_.debounce(async (query: string) => {
  if (query) {
    loading.value = true
	var res= await getInfos(query);
    setTimeout(() => {
      loading.value = false
      options.value = res;
    }, 200)
  } else {
    options.value = []
  }
},1000);

const getInfos = async (query : string) => {
		  var url = `api/Common/ProcessInventory/${query}`
		  var res = await request({url: url,method: 'get'});
		  return res.data.result;
	};
	//调用父组件的一个方法将子组件值传过去
const selectChange=(item)=>{
	emit("callBack",item);
}
</script>